<template>
<!--  <div class="tips-wrapper" ref="tipsWrapper" :style="{height: scrollHeight + 'px'}">-->
  <div class="tips-wrapper" ref="tipsWrapper">
    <ul class="tips-list">
      <li class="tips-item" v-for="(item, index) in tipsData" :key="index" @click="handleItemClick(item)">
        <div class="item-image-box">
          <img class="item-image" :src="item.cover" alt="">
        </div>
        <div></div>
        <div class="item-word">
          <p class="item-title">{{ item.title }}</p>
          <div class="item-tags">
            <el-tag v-for="tag in item.tags_list" :color="themeColor" :key="tag" style="margin-right:6px;color:#fff"
                    size="mini" hit>{{ tag }}
            </el-tag>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
// import BScroll from '@better-scroll/core'

export default {
  name: 'Nurse',
  props: {
    tipsList: Array,
    scrollHeight: Number,
    themeColor: String
  },
  // data () {
  //   return {
  //     tipsScroll: null
  //   }
  // },
  computed: {
    tipsData () {
      const tipsData = []
      this.tipsList.map((item, index) => {
        if (item.tags.length > 0) {
          item.tags_list = item.tags.split('$')
        } else {
          item.tags_list = []
        }
        tipsData.push(item)
      })
      return tipsData
    }
  },
  // watch: {
  //   tipsData () {
  //     // this.$nextTick(() => {
  //     //   this._initTipsScroll()
  //     // })
  //     setTimeout(() => {
  //       this._initTipsScroll()
  //     }, 1000)
  //   }
  // },
  methods: {
    handleItemClick (item) {
      this.$emit('itemClick', item)
    }
    // _initTipsScroll () {
    //   this.tipsScroll = new BScroll(this.$refs.tipsWrapper, {
    //     click: true,
    //     tap: true
    //   })
    //   if (!this.tipsScroll) {
    //     this.tipsScroll = new BScroll(this.$refs.tipsWrapper, {
    //       click: true,
    //       tap: true
    //     })
    //   } else {
    //     this.tipsScroll.refresh()
    //   }
    //   console.log(this.tipsScroll)
    // }
  }
}
</script>

<style lang="stylus" scoped>
.tips-wrapper {
  width: 90%;
  margin: 10px auto

  .tips-list {
    display flex
    flex-direction column
    padding-bottom: 20px;

    .tips-item {
      display flex
      flex-display: row;
      padding-bottom: 10px;
      padding-top: 10px;
      border-bottom: 1px solid #e9e9e9;

      .item-image-box {
        width: 18%;
        position: relative;
        height: 0;
        overflow: hidden;
        margin: 0;
        padding-bottom: 18%;
        margin-right: 10px;

        .item-image {
          display: block;
          position: absolute;
          width: 100%;
          top: 0;
          bottom: 0;
        }
      }

      .item-word {
        display flex
        flex-direction: column;
        line-height 28px;

        .item-tags {
          display flex
          flex-direction row
        }
      }
    }
  }
}
</style>
